<template>
	<view class="container">
		<view class="tui-addr-box">
			<form :report-submit="true">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商家名称</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="shop_name"
							placeholder="请输入商家商家名称" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="true" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
						<input placeholder-class="tui-phcolor" class="tui-input"
							v-model="info.province + info.city + info.district" disabled name="city" placeholder="请选择城市"
							maxlength="50" type="text" @click="showPicker" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">详细地址</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="company_address_detail"
							placeholder="请输入详细地址" maxlength="100" type="text" style="width:360rpx"/>
						<view class="yui-location" @tap="maps()">
							<tui-icon name="gps" :size="18" :color="'#ee980e'"></tui-icon>获取地址</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">申请人姓名</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="contacts_name"
							placeholder="请输入申请人姓名" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">申请人电话</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="contacts_phone"
							placeholder="请输入申请人电话" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">申请人邮箱</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="contacts_email"
							placeholder="请输入申请人邮箱" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">申请人身份证号</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="contacts_card_no"
							placeholder="请输入申请人身份证号" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">统一信用代码</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="organization_code"
							placeholder="请输入统一信用代码" maxlength="18" type="text" />
					</view>
				</tui-list-cell>

				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">身份证正面</view>
					
						<view class="fin_img" @tap="chooseImages(0)" v-if="imgarr[0]['name']==''">
							<view class="icon_cam">
								<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>
							</view>
							<view class="fin_txt">上传照片</view>
						</view>
						<view class="fin_img" v-else>
							<image class="uni-uploader__img" :src="imgarr[0]['name']"
								:data-src="imgarr[0]['name']" @tap="chooseImages(0)"></image>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">身份证反面</view>
						<view class="fin_img" @tap="chooseImages(1)" v-if="imgarr[1]['name']==''">
							<view class="icon_cam">
								<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>
							</view>
							<view class="fin_txt">上传照片</view>
						</view>
						<view class="fin_img" v-else>
							<image class="uni-uploader__img" :src="imgarr[1]['name']"
								:data-src="imgarr[1]['name']" @tap="chooseImages(1)"></image>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">手持身份证照片</view>
						<view class="fin_img" @tap="chooseImages(2)" v-if="imgarr[2]['name']==''">
							<view class="icon_cam">
								<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>
							</view>
							<view class="fin_txt">上传照片</view>
						</view>
						<view class="fin_img" v-else>
							<image class="uni-uploader__img" :src="imgarr[2]['name']"
								:data-src="imgarr[2]['name']" @tap="chooseImages(2)"></image>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">营业执照图片</view>
						<view class="fin_img" @tap="chooseImages(3)" v-if="imgarr[3]['name']==''">
							<view class="icon_cam">
								<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>
							</view>

							<view class="fin_txt">上传照片</view>
						</view>
						<view class="fin_img" v-else>
							<image class="uni-uploader__img" :src="imgarr[3]['name']"
								:data-src="imgarr[3]['name']" @tap="chooseImages(3)"></image>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">商家门店照片</view>
						<view class="fin_img" @tap="chooseImages(4)" v-if="imgarr[4]['name']==''">
							<view class="icon_cam">
								<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>
							</view>

							<view class="fin_txt">上传照片</view>
						</view>
						<view class="fin_img" v-else>
							<image class="uni-uploader__img" :src="imgarr[4]['name']" :data-src="imgarr[4]['name']"
								@tap="chooseImages(4)"></image>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :arrow="true" padding="0" @change="bindPickerChange">
					<view class="tui-line-cell">
						<view class="tui-title">店铺类型</view>
						<picker @change="bindPickerChange" :value="index" :range="array" range-key="group_name" v-if="array">
							<view class="input-select">{{array[index].group_name}}</view>
						</picker>
					</view>
				</tui-list-cell>
				<view class="ag_title">
					<radio-group @change="change" style="transform:scale(0.7)" color="#e41f19">
						<radio color="#e41f19" />
					</radio-group>
					<view>我已阅读并了解</view>
					<view class="agreement" @tap="treaty">【商户申请协议】</view>
				</view>

				<!-- 保存地址 -->
				<view class="tui-btn__box">
					<view class="tui-addr-save" v-if="shop_id===''">
						<tui-button shadow type="danger" height="88rpx" shape="circle" v-if="checked" @click="submit"
							:loading="isloading" :disabled="isdisabled">点击申请</tui-button>
						<tui-button shadow type="black" disabled height="88rpx" shape="circle" v-else>点击申请</tui-button>
					</view>
				</view>
				<view class="tui-btn__box" v-if="shop_id!==''">
					<view class="tui-addr-save">
						<tui-button shadow type="danger" height="88rpx" shape="circle" v-if="checked" @click="submits"
							:loading="isloading" :disabled="isdisabled">点击修改</tui-button>
						<tui-button shadow type="black" disabled height="88rpx" shape="circle" v-else>点击修改</tui-button>
					</view>
				</view>
			</form>
			<!-- 省市区 -->


			<!--picker-view start-->
			<view class="tui-mask-screen" :class="[showPickerStatus?'tui-mask-show':'']" @tap="hidePicker"></view>
			<view class="tui-picker-box" :class="[showPickerStatus?'tui-pickerbox-show':'']">
				<view class="picker-header tui-list-item">
					<view class="btn-cancle" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="hidePicker">取消
					</view>
					<view class="btn-sure" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="picker">确定</view>
				</view>
				<picker-view indicator-style="height: 50px;" class="picker-view" :value="value" @change="columnPicker">
					<picker-view-column>
						<view v-for="(item,index) in provinceData" :key="index" class="item">{{item.province_name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in cityData" :key="index" class="item">{{item.city_name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in districtData" :key="index" class="item">{{item.district_name}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
			<!--picker-view end-->

		</view>
	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				shop_name: "",
				contacts_name: "",
				contacts_phone: "",
				city: "",
				district: "",
				company_address_detail: "",
				shop_group_id: "",
				contacts_email: '',
				contacts_card_no: '',
				checked: false,
				shop_phone: '',
				array: [{
					
				}],
				index: 0,
				longitude: '',
				imgs:[],
				organization_code: '',
				selected: false,
				value: [0, 0, 0],
				showPickerStatus: false,
				provinceData: [

				],
				cityData: [],
				districtData: [],
				company_province_id: "",
				company_city_id: "",
				company_district_id: "",
				curProvince: {
					name: '台湾省',
					// 台湾省
					id: '34',
					// 34
				},
				curCity: {
					name: '',
					id: ''
				},
				curDistrict: {
					name: '',
					id: ''
				},
				info: {
					addressee: "",
					mobile: "",
					phone: "",
					province: "",
					city: "",
					district: "",
					address: "",
					zip_code: "",
					idcard: '',
				}, //  地址	
				latitude: '',
				imgarr: [
					{
						'name':''
					},
					{
						'name':''
					},
					{
						'name':''
					},
					{
						'name':''
					},
					{
						'name':''
					}
				],
				isdisabled: false,
				isloading: false,
				shop_id: "",
			};
		},
		onShow() {
			this.tui.haslogin();
			this.inits()
		},
		methods: {
			change(e) {
				this.value = e.detail.value;
				this.checked = true;
			},
			maps() {			
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.company_address_detail = res.address;
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail(err) {
						console.log(err)
					}
				});

			},
			inits() {
				let token = this.tui.getToken();
				let joiningTrader = {
					token: token,
				};
				let shopTypeList = this.tui.request('shop', 'post', joiningTrader, 1000, 1, '', 'shopTypeList');
				Promise.resolve(shopTypeList).then((value) => {
					if (value.code == 200) {
						this.array = value.data
						this.shop_group_id=value.data[0].shop_group_id
					}
				})
				
				this.resetAddressPro();
			},
			// 读取修改地址信息
			loadAddressInfo(ids) {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					address_id: this.adressid
				};
				let address = this.tui.request('user', 'post', datas, 1000, 1, '', 'address');

				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.curProvince.name = value.data.province_name;
						this.curCity.name = value.data.city_name;
						this.curDistrict.name = value.data.district_name;
						this.info.address = value.data.address;
						this.info.recipient = value.data.recipient;
						this.info.mobile = value.data.mobile;
						this.is_default = value.data.is_default == 1 ? 1 : 0;
						// this.resetAddressPro();
						this.info.province = this.curProvince.name;
						this.info.city = this.curCity.name;
						this.info.district = this.curDistrict.name;
						this.curProvince.id = value.data.province_id
						this.curCity.id = value.data.city_id;
						this.curDistrict.id = value.data.district_id;
					} else {
						this.tui.toast(value.message);
					}
				})

			},
			//picker change切换事件
			columnPicker: function(e) {

				this.curDistrict.name = '';
				this.curCity.name = '';
				let value = e.detail.value;
				//如果两者下标不一致，表示滚动过
				if (this.value[0] !== value[0]) {

					this.provinceData = this.provinceData;
					this.resetAddressCity(this.provinceData[value[0]]['province_id']);
					this.resetAddressDistrict(this.cityData[value[1]]['city_id']);

					this.value = [value[0], 0, 0]
				} else if (this.value[1] !== value[1]) {
					this.provinceData = this.provinceData;
					this.cityData = this.cityData;
					this.resetAddressDistrict(this.cityData[value[1]]['city_id']);
					this.value = [value[0], value[1], 0]
				} else {
					this.value = value


				}
			},
			bindPickerChange: function(e) {
			    this.index = e.detail.value;
				this.shop_group_id = this.array[this.index].shop_group_id;
			},
			//确定按钮
			picker: function(e) {
				let value = this.value;
				this.info.province = this.provinceData[value[0]].province_name;
				this.info.city = this.cityData[value[1]].city_name;
				this.info.district = this.districtData[value[2]].district_name;

				this.curProvince.id = this.provinceData[value[0]].province_id;
				this.curCity.id = this.cityData[value[1]].city_id;
				this.curDistrict.id = this.districtData[value[2]].district_id;
				this.showPickerStatus = false
			},
			// 显示picker-view
			showPicker: function() {
				this.resetAddressPro();
				this.showPickerStatus = true

			},
			// 隐藏picker-view
			hidePicker: function() {
				this.showPickerStatus = false
			},
			// 获取省
			resetAddressPro() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
				};
				let address = this.tui.request('user', 'post', datas, 1000, 1, '', 'provinces');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {

						this.provinceData = value.data;
						this.provinceData.forEach((item, index) => {
							if (this.curProvince.name == item.province_name) {
								this.curProvince.id = item.province_id;
								this.value = [index, 0, 0];
								this.provinceindex = index;
							}
						})

						this.resetAddressCity(this.curProvince.id);
					}
				})
			},
			// 获取市
			resetAddressCity(id) {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					province_id: id
				};
				let curCityId = '';
				let address = this.tui.request('user', 'post', datas, 1000, 1, '', 'provinces');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.cityData = value.data;
						if (this.curCity.name) {
							this.cityData.forEach((item, index) => {
								if (this.curCity.name == item.city_name) {
									this.value[1] = index;
									this.cityindex = index
								}
							});
						} else {
							this.cityData.forEach((item, index) => {
								this.curCity.id = this.cityData[0].city_id;
							});
						}
						this.resetAddressDistrict(this.curCity.id)

					}
				})
			},
			// 获取区
			resetAddressDistrict(id) {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					city_id: id
				};
				let address = this.tui.request('user', 'post', datas, 1000, 1, '', 'provinces');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.districtData = value.data;
						this.districtData.forEach((item, index) => {
							if (this.curDistrict.name == item.district_name) {
								this.curDistrict.id = item.district_id;
								this.value = [this.provinceindex, this.cityindex, index];
							} else {
								this.curDistrict.id = item.district_id;
							}
						});
					}
				})
			},
			treaty: function() {
				uni.navigateTo({
					url: '/pageschild/news/newsDetail/newsDetail?nid=4'
				});
			},
			
			chooseImages: async function(e) {
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					count: 1,
					success: (res) => {
						let max_size = 5 * 1024 * 1024;
						// #ifdef H5
						if (res.tempFiles[0].type.indexOf("image") < 0) {
							this.tui.toast("请选择图片类型的文件");
							return;
						}
						// #endif
						
						if (res.tempFiles[0].size >= max_size) {
							this.tui.toast("上传图片不能超过5M");
							return;
						}
				       
						let token = this.tui.getToken();
						let datas = {
							token: token,
							image: res.tempFiles[0].name,
						};
						let uper = this.tui.uploadFile('shop', datas, res.tempFilePaths[0], 'applyFile');
						Promise.resolve(uper).then((value) => {
							if (value.code == 200) {
								this.imgarr[e]['name']=value.data.file_path;
							} else {
								this.tui.toast(value.message);
							}
						})
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						// #endif
					}
				})
			},
			submit() {
				this.isloading = true;
				this.isdisabled = true;
				let token = this.tui.getToken();
				if(this.latitude==''){
					this.tui.toast('请先获取地址');
					this.isloading = false;
					this.isdisabled = false;
					return;
				}
				let latitude_longitude=this.latitude+','+this.longitude;
				let datas = {
					token: token,
					shop_name: this.shop_name,
					company_province_id:this.curProvince.id,
					company_city_id:this.curCity.id,
					company_district_id:this.curDistrict.id,
					company_address_detail: this.company_address_detail,
					latitude_longitude:latitude_longitude,
					contacts_card_electronic_2: this.imgarr[0]['name'],
					contacts_card_electronic_3: this.imgarr[1]['name'],
					contacts_card_electronic_1: this.imgarr[2]['name'],
					business_licence_number_electronic: this.imgarr[3]['name'],
					shop_avatar: this.imgarr[4]['name'],
					shop_group_id: this.shop_group_id,
					contacts_name:this.contacts_name,
					contacts_phone:this.contacts_phone,
					contacts_email:this.contacts_email,
					contacts_card_no:this.contacts_card_no
				};
				let franchinese = this.tui.request('shop', 'post', datas, 1000, 1, '', 'shopApply');
				Promise.resolve(franchinese).then((value) => {
					if (value.code == 200) {
						this.isloading = false;
						this.isdisabled = false;
						this.tui.toast(value.message);
						uni.navigateTo({
							url: '/pageschild/user/examine'
						});
					} else {
						this.tui.toast(value.message);
						this.isloading = false;
						this.isdisabled = false;
					}
				})
			},
			submits() {
				let token = this.tui.getToken();
				let rectification = {
					token: token,
					shop_name: this.shop_name,
					credit_code: this.credit_code,
					address: this.address,
					longitude: this.longitude,
					latitude: this.latitude,
					front_id_card: this.imgarr[0],
					back_id_card: this.imgarr[1],
					business_license: this.imgarr[2],
					shop_photos: this.imgarr[3],
					shop_phone: this.shop_phone,
				};

				let rectificat = this.tui.request('user', 'post', rectification, 1000, 1, '',
					'rectificationJoiningTrader');
				Promise.resolve(rectificat).then((value) => {
					if (value.code == 10000) {
						this.initlist()
						uni.navigateTo({
							url: '/pageschild/user/examine'
						});
					} else {

					}
				})
			},
			initlist() {
				let token = this.tui.getToken();
				let joiningTrader = {
					token: token,
					type: 1,
				};

				let joingTrade = this.tui.request('join', 'post', joiningTrader, 1000, 1, '', 'joinTradeDetail');
				Promise.resolve(joingTrade).then((value) => {
					if (value.code == 10000) {
						this.joingTrade = value.data;
						if (this.joingTrade.state == 0) {
							setTimeout(() => {
								this.cg = true
							}, 3000)
						}
					} else {

					}
				})
			},
		},
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
		margin-top: 20rpx;
		color: #333;
	}

	/* picker start*/

	.tui-mask-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}

	.tui-picker-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		background: #fff;
	}

	.tui-pickerbox-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 32rpx;
		background: #fff;
	}

	.tui-list-item::after {
		left: 0;
	}

	.btn-cancle {
		padding: 20rpx;
		color: #888;
	}

	.btn-sure {
		padding: 20rpx;
		color: #5677fc;
	}

	.picker-view {
		width: 100%;
		height: 260px;
	}

	.item {
		text-align: center;
	}

	.picker-item {
		text-align: center
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.ag_title {
		margin: 40rpx 40rpx 0 30rpx;
		display: flex;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 20rpx;
	}

	.uni-uploader__img {
		width: 100%;
		height: 100%;
	}

	.tui-input {
		width: 500rpx;
		font-size: 28rpx;
	}

	.agreement {
		color: #ff241d
	}

	.tui-btn__box {
		width: 100%;
		padding: 20px 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.fin-list {
		justify-content: space-between;
	}

	.fin_img {
		border: 1px dashed #d9d8d8;
		border-radius: 10rpx;
		width: 146rpx;
		height: 146rpx;
		margin: 1rpx 0;
	}

	.icon_cam {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;
	}

	.fin_txt {
		font-size: 20rpx;
		text-align: center;
		color: #707070
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}
    .yui-location{
		position: absolute;
		right:20rpx;
		color:#ee980e;
		font-size: 24rpx;
	}
	.yui-location-icon{
		color:#f00
	}
	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #E41F19;
		border-color: #E41F19;
		color: #fff;
	}

	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
</style>
